<template>
  <div class="business">
    <a-card title="商家信息墙" style="width: 100%">
      <div class="operate">
        <a-button type="dashed" style="width: 100%" icon="plus" @click="openmodal">新增商家</a-button>
      </div>
      <a-divider />
      <div class="business_table">
        <a-table
          :columns="columns"
          :rowKey="businessList => businessList.id"
          :dataSource="businessList"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange">
          <div slot="goods_img" slot-scope="row">
            <img :src="row.goods_img" alt="" srcset="" style="width:120px">
          </div>
          <div slot="active" slot-scope="row">
            <span class="goodsurl" @click="doedit(row)">改</span>
            <span class="goodsurl" @click="doset(row)">排</span>
            <a-popconfirm title="确定删除吗?" ok-text="删除" cancel-text="取消" @confirm="delShopWall(row.id)">
              <span class="goodsurl quan">删</span>
            </a-popconfirm>
          </div>
        </a-table>
        <a-modal
          :title="isadd===true?'新增商家':'修改商家'"
          :visible="visible"
          width="600px"
          :confirm-loading="confirmLoading"
          ok-text="确认"
          cancel-text="取消"
          @ok="dochange()"
          @cancel="handleCancel">

          <div class="display">
            <span class="title">商品ID</span>
            <a-input placeholder="请输入商品的ID" v-model="form.goods_id" allowClear />
          </div>
          <div class="display">
            <span class="title">商品主图</span>
            <a-input placeholder="请输入商品图片链接" v-model="form.goods_img" allowClear />
          </div>
          <div class="display">
            <span class="title"></span>
            <div class="showimg_mian">
              <div class="showimg">
                <a-upload
                  v-if="form.goods_img==''"
                  name="file"
                  action="https://jfk-api.letuilm.com/api/upload_img"
                  list-type="picture-card"
                  :multiple="false"
                  :show-upload-list="false"
                  :before-upload="beforeUpload"
                  @change="handleChange3">
                  <div class="nogoodsimg">
                    <div class="no_main">
                      <a-icon type="fund" />
                      <p>
                        请上传商品主图
                      </p>
                    </div>
                  </div>
                </a-upload>
                <div v-else class="img_box">
                  <img :src="form.goods_img" alt="" srcset="">
                  <a-icon type="close-circle" @click="closeimg" />
                </div>
              </div>
            </div>
          </div>
          <div class="display">
            <span class="title">商品标题</span>
            <a-input placeholder="请输入商品标题" v-model="form.goods_title" allowClear />
          </div>
          <div class="display">
            <span class="title">商家要求</span>
            <a-input placeholder="请输入商家的要求" v-model="form.goods_requirement" allowClear />
          </div>
          <div class="display">
            <span class="title">联系方式</span>
            <a-input placeholder="请输入联系方式" v-model="form.contact_phone" allowClear />
          </div>
        </a-modal>
        <a-modal v-model="rankingshow" title="设置排名" @ok="handleOk3" @cancel="handleCancel">
          <a-input placeholder="请输入排名" v-model="sort" allowClear />
        </a-modal>
      </div>
    </a-card>

  </div>
</template>

<script>
  import {
    getShopWallList,
    addShopWall,
    setShopRanking,
    updateShopWall,
    delShopWall
  } from '@/api/business'
  //   import Moment from 'moment'

  export default {
    name: 'Business',
    data () {
      return {
        sort: '',
        rankingshow: false,
        startValue: null,
        endValue: null,
        endOpen: false,
        isadd: false,
        visible: false,
        confirmLoading: false,
        count: 0,
        columns: [{
            title: 'ID',
            width: 150,
            align: 'center',
            dataIndex: 'id',
            scopedSlots: {
              customRender: 'id'
            }
          },
          {
            title: '商品ID',
            align: 'center',
            dataIndex: 'goods_id',
            scopedSlots: {
              customRender: 'goods_id'
            }
          },
          {
            title: '商品图片',
            align: 'center',
            // dataIndex: 'goods_img',
            scopedSlots: {
              customRender: 'goods_img'
            }
          },
          {
            title: '商品名称',
            align: 'center',
            dataIndex: 'goods_title',
            scopedSlots: {
              customRender: 'goods_title'
            }
          },
          {
            title: '商家要求',
            align: 'center',
            dataIndex: 'goods_requirement',
            scopedSlots: {
              customRender: 'goods_requirement'
            }
          },
          {
            title: '联系方式',
            align: 'center',
            dataIndex: 'contact_phone',
            scopedSlots: {
              customRender: 'contact_phone'
            }
          },
          {
            title: '操作',
            align: 'center',
            scopedSlots: {
              customRender: 'active'
            }
          }

        ],
        pagination: {
          pageSize: 15,
          page: 1
        },
        loading: false,
        businessList: [],
        balist: [],
        form: {
          id: '',
          goods_id: '',
          goods_img: '',
          goods_title: '',
          goods_requirement: '',
          contact_phone: ''
        }
      }
    },

    computed: {

    },
    created () {
      this.getShopWallList(1, 15)
    },
    mounted () {

    },
    watch: {

    },
    methods: {
      handleOk3 () {
        setShopRanking({
          id: this.id,
          sort: this.sort
        }).then(res => {
          console.log(res)
          if (res.code === 200) {
              this.getShopWallList(1, 15)
              this.$message.success('设置成功!')
              this.rankingshow = false
          } else {
              this.$message.info(res.msg)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      doset (row) {
        console.log(row)
        this.id = row.id
        this.rankingshow = true
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      closeimg () {
        this.form.goods_img = ''
      },
      handleChange3 (info) {
        // console.log('info', info)
        this.form.goods_img = `//` + info.file.response.data.url
      },
      handleTableChange (pagination, filters) {
        // console.log(pagination)
        const pager = {
          ...this.pagination
        }
        pager.current = pagination.current
        this.pagination = pager
        this.fetch({
          results: pagination.pageSize,
          page: pagination.current,
          ...filters
        })
      },
      fetch (params = {}) {
        // console.log('params:', params)
        this.loading = true
        this.getShopWallList(params.page, 15)
      },
      // 删除商家
      delShopWall (id) {
        delShopWall({
            id: id
          })
          .then(res => {
            if (res.code === 200) {
              //   console.log('返回', res)
              this.getShopWallList(1, 15)
              this.$message.success('删除成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      doedit (row) {
        console.log(row)
        this.form = row
        this.form.id = row.id
        this.isadd = false
        this.visible = true
      },
      handleCancel () {
        this.visible = false
        this.rankingshow = false
        this.sort = ''
        this.form = this.$options.data().form
      },
      openmodal () {
        this.isadd = true
        this.visible = true
      },
      dochange () {
        if (this.isadd === true) {
          addShopWall(this.form).then(res => {
            // console.log('新增返回', res)
            if (res.code === 200) {
              this.$message.success('新增成功!')
              this.handleCancel()
              this.getShopWallList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        } else {
          updateShopWall(this.form).then(res => {
            // console.log('修改返回', res)
            if (res.code === 200) {
              this.$message.success('修改成功!')
              this.handleCancel()
              this.getShopWallList(1, 15)
            } else {
              this.$message.info(res.msg)
            }
          }).catch(err => {
            console.log(err)
          })
        }
      },

      // 获取等级列表
      getShopWallList (page, pagesize) {
        this.loading = true
        getShopWallList({
            page: page,
            pagesize: pagesize
          })
          .then(res => {
            if (res.code === 200) {
              console.log('商家列表返回', res)
              //   this.count = res.data.count
              this.businessList = res.data.data
              const pagination = {
                ...this.pagination
              }
              pagination.total = res.data.count
              this.pagination = pagination
              this.loading = false
            } else {
              this.$message.info(res.msg)
              this.loading = false
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .display {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: right;
    margin-bottom: 10px;

    .title {
      display: inline-block;
      width: 80px;
      margin-right: 10px
    }

    .showimg_mian {
      display: flex;

      .anticon-play-circle {
        font-size: 67px;
      }

      .showimg {
        width: 200px;
        margin-right: 20px;

        /deep/.ant-upload {
          width: 200px;
          padding: 0px;
        }

        .nogoodsimg {
          text-align: center;

          .no_main {
            width: 150px;
            margin: 35px auto;

            .anticon-fund {
              font-size: 67px;
            }
          }
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      .img_box {
        position: relative;
        color: white;

        img {
          width: 100%;
          height: 100%;
        }

        .anticon-close-circle {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 24px;
          cursor: pointer;
          display: none;
          transition: all 0.3s linear;
          color: red;
        }

        img:hover+.anticon-close-circle {
          display: block;
        }

        .anticon-close-circle:hover {
          display: block;
          transform: rotate(90deg);
        }
      }
    }
  }

  .business_table {
    .goodsurl {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 18px;
      // font-weight: bolder;
      text-align: center;
      border-radius: 50%;
      // padding: 5px;
      color: gray;
      cursor: pointer;
      border: 1px solid gray;
    }

    .ant-table-row:hover {
      .goodsurl {
        background-color: orange;
        color: #fff;
        // font-weight: bolder;
        border: none;
      }

      .quan {
        background-color: red;
      }
    }
  }
</style>
